<template>
  <div>
    <el-table
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row
      height="130px"
    >
      >
      <el-table-column :label="dataList.DeviceNumber">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>
      <el-table-column
        :label="
          $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
        "
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DeviceSpecifications">
        <template slot-scope="scope">
          {{ scope.row.specifications }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DeviceSupplierName">
        <template slot-scope="scope">
          {{ scope.row.supplierName }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DeviceStatus">
        <template slot-scope="scope">
          {{ scope.row.statusName }}
        </template>
      </el-table-column>
      <el-table-column
        :label="
          $i18n.locale === 'en'
            ? dataList.eDeviceStorageAddress
            : dataList.DeviceStorageAddress
        "
      >
        <template slot-scope="scope">
          {{ scope.row.storageAddress }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DevicePersonResponsibleId">
        <template slot-scope="scope">
          {{ scope.row.personResponsibleName }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.Devicedepart">
        <template slot-scope="scope">
          {{ scope.row.departName }}
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-descriptions class="margin-top" :column="1" border>
      <el-descriptions-item
        :label="dataList.ChangeType"
        :label-style="{ width: '150px' }"
      >
        <div style="float: left">
          <span>{{ formData.typeName }}</span>
        </div>
        <div style="float: left; margin-left: 10px">
          <span v-if="formData.type == 20"
            >{{ dataList.StopTime }} {{ formData.stopDate }}</span
          >
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.ApplacationReason">
        <span>
          {{ formData.reason }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.LastCalibDate">
        <span>
          {{ formatTime(formData.calibrationDate) }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.Deviceremark">
        <span>
          {{ formData.remark }}
        </span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { get } from "../../api/DeviceChange.js";
import { formatTime } from "../../utils/time";
export default {
  name: "DeviceChangeView",
  components: {},
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      list: [],
      formData: {
        id: "",
        num: "",
        calibrationDate: "",
        type: "",
        typeName: "",
        statusId: null,
        statusName: "",
        stopDate: "",
        creatorId: "",
        creatorName: "",
        reason: "",
        deviceNum: "",
        remark: "",
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    get({ id: this.id }).then((res) => {
      this.formData = res.data;
      this.list = res.data.deviceDtos;
    });
  },
  methods: { formatTime },
};
</script>
